You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
5.0 KiB
128 lines
5.0 KiB
<template>
|
|
<div class="banner h-[60px]" v-if="form">
|
|
<el-image :src="form.photo"></el-image>
|
|
</div>
|
|
<div v-if="form" class="flex flex-col w-full md:w-3/4 m-auto my-3">
|
|
<el-breadcrumb class="py-2" separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ form.categoryParent }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ form.goodsName }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
|
|
<div class="bg-white p-3 mt-3 flex items-center justify-between">
|
|
<div class="left flex gap-xs items-center">
|
|
<el-avatar shape="square" :size="55" />
|
|
<div class="shop-name flex flex-col">
|
|
<div class="shop-name cursor-pointer">
|
|
<div class="flex items-center">
|
|
<text class="text-xl">南宁市网宿信息科技有限公司</text>
|
|
<el-tag type="success" size="small" class="ml-2">官网</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-rate
|
|
v-model="rate"
|
|
show-score
|
|
text-color="#ff9900"
|
|
score-template="{value}">
|
|
</el-rate>
|
|
</div>
|
|
</div>
|
|
<el-button>进入店铺</el-button>
|
|
</div>
|
|
|
|
<div class="bg-white p-4 mt-4 flex gap-xl">
|
|
<div class="goods-image flex gap-xl">
|
|
<div class="gap-xs flex flex-col">
|
|
<el-avatar v-for="item in form.files" :src="item.url" size="large" shape="square" />
|
|
</div>
|
|
<el-image :src="form.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image>
|
|
</div>
|
|
<div class="goods-info flex flex-col gap-xs">
|
|
<div class="goods-name text-2xl">{{ form.goodsName }}</div>
|
|
<div class="goods-price text-2xl red">￥{{ form.salePrice * form.num }}</div>
|
|
<div class="text-green-7">购买得积分</div>
|
|
<div class="text-gray-4">配送：无需配送</div>
|
|
<div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
|
|
<div class="text-gray-4">销量： {{ form.sales }}</div>
|
|
<template v-for="spec in form.goodsSpecValue">
|
|
<div class="flex items-center">
|
|
<div class="text-gray-4">{{ spec.value }}：</div>
|
|
<el-radio-group v-model="form.radio">
|
|
<el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</template>
|
|
<div class="text-gray-4">
|
|
已选中：{{ form.radio }}
|
|
</div>
|
|
<div class="text-gray-4">
|
|
数量：
|
|
<el-input-number v-model="form.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
|
|
</div>
|
|
<div class="py-5">
|
|
<el-button-group size="large">
|
|
<el-button type="danger">立即购买</el-button>
|
|
<el-button type="warning">加入购物车</el-button>
|
|
</el-button-group>
|
|
<el-button size="large" class="ml-3">收藏</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content p-4 bg-white">
|
|
<el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
|
|
<el-tab-pane label="参数信息" name="parameter">
|
|
<el-descriptions class="margin-top" title="参数信息" :column="1" border>
|
|
<el-descriptions-item label="品牌">websoft</el-descriptions-item>
|
|
<el-descriptions-item label="版本">2.0</el-descriptions-item>
|
|
<el-descriptions-item label="开发语言">Java、Vue3、Nuxt</el-descriptions-item>
|
|
<el-descriptions-item label="版本">
|
|
<el-tag size="small">授权版</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="图文详情" name="content">
|
|
<div class="files flex flex-col w-3/4">
|
|
<el-image v-for="item in form.files" :src="item.url" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="用户评价" name="reviews">用户评价</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div v-if="!form">
|
|
<el-empty description="404 页面不存在"></el-empty>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {ApiResult} from "~/api";
|
|
import {useRequest} from "~/composables/useRequest";
|
|
import type {Goods} from "~/api/shop/goods/model";
|
|
|
|
const route = useRoute();
|
|
const { query, params } = route;
|
|
const { name: productName } = params;
|
|
const activeName = ref('parameter');
|
|
const rate = ref(4);
|
|
|
|
|
|
// 页面信息
|
|
const form = ref<Goods | any>();
|
|
|
|
// 请求数据
|
|
const { data: info } = await useRequest<ApiResult<Goods>>('/shop/goods/' + productName)
|
|
form.value = info.value?.data;
|
|
form.value.files = JSON.parse(form.value.files);
|
|
form.value.num = 1;
|
|
form.value.radio = '0'
|
|
|
|
|
|
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|